<template>
  <div>
    <div class="select-tree" v-show="showTree">
      <div style="padding: 0 10px;margin-bottom: 10px">
        <el-input
          v-model="filterText"
          placeholder="搜索站点"
          size="mini"
        />
        <i class="el-icon-s-fold icod" @click="visshow"></i>
      </div>
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div style="padding-bottom: 10px">
          <el-tree
            ref="tree"
            :expand-on-click-node="false"
            node-key="id"
            :data="siteList"
            :props="defaultProps"
            :default-expand-all="true"
            :filter-node-method="filterNode"
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-scrollbar>
    </div>
    <div v-show="!showTree" class="noshow">
      <i class="el-icon-s-unfold icod" @click="noshow"></i>
    </div>
  </div>
</template>

<script>

export default {
  name: 'SingleSiteTree',
  props: {
    showLeaf: {
      type: Boolean,
      default: true
    },
    parentAllowClick: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      filterText: '',
      siteList: [{
        id: 370400,
        name: '枣庄市',
        type: '0',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'name',
        disabled: 'type'
      },
      showTree: true
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getSiteList()
  },
  methods: {
    getSiteList() {
      this.$http.get('/ywSubstation/getSubstationMenu').then(response => {
        const data = response.data
        if (!this.showLeaf) {
          this.siteList[0].children = data.map(value => {
            value.children = undefined
            return value
          })
        } else {
          this.siteList[0].children = data
        }
        this.$nextTick(() => {
          // const currentNode = this.parentAllowClick ? (this.showLeaf ? this.siteList[0].children[0] : this.siteList[0]) : data[0]
          // 获取第一个站点并选中
          console.log('this.getOneNode(this.siteList)', this.getOneNode(this.siteList)
          )
          const selsctNode = this.getOneNode(this.siteList)
          // const currentNode = this.parentAllowClick ? this.siteList[0].children[0] : data[0]
          this.$refs.tree.setCurrentNode(selsctNode)
          this.$nextTick(() => {
            this.$parent.treeCurrentNode = {
              data: selsctNode,
              isLeaf: !this.parentAllowClick
            }
            this.$parent.getList()
          })
        })
      })
    },
    getOneNode(data) {
      const allData = data
      let selectNode = null
      try {
        const findName = (columnDef) => {
          if (columnDef.type == '1') {
            throw columnDef // 找到节点抛出
          }
          if (columnDef.children && columnDef.children.length > 0) { // 子节点进行递归
            for (let i in columnDef.children) {
              findName(columnDef.children[i])
            }
          }
        }
        for (let i in allData) { // 最外层循环
          findName(allData[i])
        }
      } catch (name) {
        selectNode = name // 找到的节点
      }
      return selectNode
    },
    filterNode(value, data, node) {
      if (!value) {
        // node.expanded = false
        return true
      }
      let parentNode = node.parent
      let labels = [node.label]
      let level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label => label.indexOf(value) !== -1)
    },
    // 节点单击事件
    handleNodeClick(data, { isLeaf }) {
      if (data.type == '0') {
        this.$refs.tree.setCurrentKey(null)
        this.$message.warning('请选择一个站点')
        return false
      }
      this.$parent.treeCurrentNode = { data, isLeaf }
      if (this.parentAllowClick === true || isLeaf === true) {
        this.$parent.getList()
      }
    },
    visshow() {
      this.showTree = false
      this.$emit('furn')
    },
    noshow() {
      this.showTree = true
      this.$emit('furn')
    }
  }
}
</script>

<style scoped>
.select-tree {
  position: fixed;
  width: 200px;
  background: #fff;
  height: 100%;
  padding-top: 10px;
}

.el-scrollbar {
  height: calc(100% - 70px);
}

.icod {
  display: block;
  font-size: 25px;
  text-align: right;
  margin-bottom: -12px;
  color: #2375DB;
}

.noshow {
  /* background: cornflowerblue; */
  width: 30px;
}
</style>
